7. Web
Today's topics
Web and interaction design
Web and "Smooth" interface
Navigation techniques on the Web
We are living in the Web age!
Advantages of the Web
Ubiquitous
Read/write any information
Available everywhere
Information sharing everywhere
Information from all over the world
Single info source
Simple user testing
Installation not required
Advantages of the Web
Collective intelligence
Information sharing
Using various services
Easy visualization
Easy programming
Best for interaction design experiments
Before the Web age
Software distribution difficult
Installation difficult
Getting user feedbacks difficult
What we could not do on a browser
Direct manipulation I/F
Sending data from server
Large data streaming
Text editing
Drawing graphics
Handling audio
Handling 3D graphics
What we could not do on a browser
Direct manipulation I/F
Sending data from server
Large data streaming
Text editing
Drawing graphics
Handling audio
Handling 3D graphics
What we do not do on the Web
Large-scale software development
Desktop GUI
Web and the real world
People want to use the Web everywhere
Ubiquitous computing, IoT, AR, VR, ...
How can we integrate them?
Do you have your own domain?
Do you have your own Web server?
Why not?
Having your own domain makes sense
Having a Web server is recommended
What you can do with your own server
You can create your own Web pages
You can have a nice email address
You can perform strange experiments
You can backup data on your server
Better than using cloud services
You can put any data
You don't have to rely on somebody else
Obstacles?
Running costs
Service fee
Electricity
Time-consuming
Managements
Registration
Setting up everything
Risks
Possible Attacks
How much should we spend?
For domain registration
￥1,000 / year
For servers
￥10,000 / year
Multiple domains on one server
Let's have your own domain/server!
Web service and Ubicomp
Goals are similar
Everyone / everywhere / anytime
Integration expected
"Smooth" interaction
Direct
Reversible
Continuous
Intuitive
Direct Manipulation
Coind by Ben Shneiderman
Ben Shneiderman
Professor at University of Maryland
Famous researcher on user interface
http://gyazo.com/23a7bab8adfcf991a4df9bf69d0b1711.png
UI textbook by Shneiderman
Covering wide ranges
https://www.amazon.co.jp/dp/013438038X https://gyazo.com/b03ecbbb108b911464ed53d3fda78396.png
Examples of direct manipulation
Slider
Scroll bar
Window dragging
Dinamic query
Dynamic Query
Coined by Ben Shneiderman
Search results change as soon as search condition changes
e.g. "Incremental" search
Incremental search
Perform search as soon as condition changes
Go back to previous state when character deleted
https://www.jorudan.co.jp/ https://gyazo.com/f2f45cf575e56cbd2c646edeba728430
Non-direct manipulation interface
Window open/close
Window disappear suddenly
Clicking links on Web page
Suddenly jump to different page
Selecting command from menu
Cannot undo easily
Interface in the real world
Almost all interaction is smooth
Water faucet
Stairing wheel
Screw
...
Web access basics
http://gyazo.com/4fe5e73511ea1909e61e437e06a50056.png
Original Web browser
Page transition required
Server cannot start communication
Requests sent from browser
No 'chat' possible
Not flexible
'Not smooth' at all
Problems of page transition
Large transition time
Sudden change of display
Users are surprised
Basic browser operation
code:brouserloop.txt
while true do
1. User does something on browser
2. Send request to server
3. Receive response from server
4. Display HTML based on the response
end
Problems
Display updated only after server response
Nothing happens without user operation
Direct manipulation impossible
User interface on the (old) Web
Non-smooth interaction
Click-based page transition
Page transition after performing search
Page transition based on menus
Back button for undo
Most frequently used button
Modern Web applications
"Rich" internet application (RIA)
Single-page application (SPA)
URL does not change
Everything implemented in JavaScript
DOM handling or drawing
Everything by JavaScript
Smooth interaction possible
HTML5 features
New semantic tags
RDFs, microformat
Local storage, File API
Device access
Geolocation API, microphone, camera,
Communication
WebSocket, Server-Sent Events
Audio/video
3D-CG, drawing
SVG, canvas, WebGL, CSS3 3D
CSS3
Native application and web application
Native application
Runs on PC desktop
Implemented in C, Java
Web applications
Runs on browser
Converting Web app to native app
RIA requirements
Always accept user inputs
Change display at any time
Background communication with server
Smooth interface
Smooth interface on a browser
Rewrite DOM dynamically
DOM: Document Object Model
Hierarchical HTML structure
Rewrite HTML by JavaScript
Draw everything using drawing libraries
Canvas
SVG
WebGL
Rewriting DOM (HTML)
Construct hierarchical structure
document.getElementById('abc') ...
document.querySelector('#abc')
Use jQuery
Easier to handle DOM
$('#abc') ...
Using virtual DOM
Use React.js, Vue.js, etc.
Write HTML in JS code
Using drawing libraries
Canvas
Used in P5.js
SVG
Used in D3.js
Ajax
Asynchronous JAvaScript + XML
Used in modern Web application like GoogleMaps
Asynchronous communication between browser and server
Asynchronous communication
Exchange data without waiting for something
Don't wait user operations
Don't wait server operations
Minimize users' waiting time
Synchronous communication
System and user send data alternatively
Unix command shell
Calculator
TV
Vending machine
...
HTTP is synchronous (TCP/IP)
Web access basics
http://gyazo.com/4fe5e73511ea1909e61e437e06a50056.png
Interface and parallelism
Various pararell processing required
System response and user operation
Voice input and keyboard
Error handling
Multiple users
Parallelism required for asynchronous communication
How Ajax works
Use asynchronous communication API on JavaScript
XMLHttpRequest()
Finishes promptly after sending request to server
Callback function called when data is available
Use the data for drawing, etc.
Ajax examples
Google appls
GoogleMaps
GMail
Scrapbox
All other Web applications
Problems of Ajax
Asynchronous communication is difficult
Parallel processing is difficult
Exception handling is difficult
Many exceptions while communication
Server can't send data to browser
Can't create chat service
WebSocket
Communication between browser and server without HTTP
Flexible communication
Server can send data to browser
2011/12 RFC6455 proposed standard
Use Node.js
Navigation on the Web
Standard way of Web navigation
Actively view Web contents
Web contents are made by active people
Actively post information to SNS
Actively define links
Other possibilities
Passive navigation
Automatic navigation
Many types of navigation
"Flow" information and "stock" information
Navigation for information management
Bookmarking
Passive navigation
Difference between TV and net
We lean forward for using net
We lean backword for watching TV
Using Web
http://gyazo.com/bc341d03c27dc625aea7c943f06dc27c.png
Watching TV
http://gyazo.com/32087b1dce342dd540c7277b4b11a431.png
Activeness of computer users
CLI - very active
Everyone should be very active
Users should type many keys
GUI - partially passive
Users repeat selecting items from menus
Screensaver - passive
Users does nothing
Page revisit ratio
We don't visit new pages
Page revisit ratio = 66%
Automatic navigation maybe useful
Rotating suchi restaurant
http://gyazo.com/07f577c2336165513eba49d3c008e241.png
Information if automatically presented
Users just select items
Automatic navigation sysems
Viewing-based interface
GyaTV
Wikipedia Saver
Viewing-based interface
Keita Watanabe @ Meiji University
http://gyazo.com/0a5dacb8b06b58b804944a9c3e12cd03.png
Implementation of Viewing-based interface
Floating multiple "keywords"
Perform Google search when two keywords collide
Automatically show Web pages
View Web pages like using a TV
https://gyazo.com/1c22b7a4015f18d5ba0183416c366629
Display Wikipedia article at random
Interesting pages displayed automatically
Navigation based on association
Neighbor-based search
Location-based navigation
Wiki keyword navigation
KWIC
List files based on similarities
http://gyazo.com/49ff2980552894951bb1a1e0e12368a7.png
Similarity examples
http://gyazo.com/9ff211e2c2f30b87fe047ecff7bd0f49.png
Photo navigation
Use date, tags, location data to mange photo data
Related photos can be found
https://gyazo.com/3c82985ce4904c39fde8de20f477921c
Photo management on Scrapbox
Use Scrapbox for managing photos
KWIC Navigator
Navigate information space by
Follow related keywords for navigation
http://gyazo.com/8f3fb87bc285391340f8cbef97e04eea.png
Wiki keyword navigation
https://gyazo.com/60d2cf8a3068f9e092b76c17e86af0a0
Scrapbox
Use links for connecting pages (Wiki)
Bi-directional links
2-hop links displayed
Contents publish/subscribe using Scrapbox data
https://gyazo.com/ce686ac8d13e59a42180652780fbf9de
Find books based on relations
https://gyazo.com/5e8c8ba2e824732d0fd3a8552a8ef4bf
https://gyazo.com/ba81162f57180fb6530877c06417ffc0
Navigation for information management
Bookmarking
Web shortcuts
Using bookmarks
Social bookmarks
Public bookmarks
Visit history
Social bookmark
Sharing Web bookmarks among users
Example: Hatena bookmark
Social bookmark usages
People tend to use it for bragging
Or use it for blaming others
Define short names for URLs
c.f. TinyURL
Personal shortcuts